<template>
  <div class="all">
    <div v-if="songList.length" class="allsongs-box">
      <songCard v-for="item in songList" 
      :songName="item.name" :key="item.songid"
      :songId="item.songid"
      :singer="item.singername"
      :albumName="item.albumname"
      :albumId="item.albumid"
      @goToMusic="goToMusic" @likeMusic="likeMusic" @playMusic="playMusic"
      ></songCard>
    </div>
    
  </div>
</template>

<script>
import axios from 'axios';
import songCard from '../components/songCard.vue';

export default {
  name: 'all',
  components: {
    songCard
  },
  data() {
    return {
      songList: []
    }
  },
  methods: {
    goToMusic(songId, albumId) {
      this.$emit('goToMusic', songId, albumId)
    },
    likeMusic(songId) {
      this.$emit('handleLikeMusic', songId)
    },
    playMusic(songId) {
      this.$emit('handlePlayMusic', songId)
    }
  },
  mounted() {
    console.log('mounted')
    axios({
      method: 'get',
      url: '/api/getAllSongs'
    }).then((res) => {
      console.log(res)
      this.$nextTick(() => {
        if (res.data.success) {
          console.log('success')
          this.songList = res.data.data
        }
      })
    })
  }
}
</script>

<style>
.all {
  /* display: flex; */
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.allsongs-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
</style>
